<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
body{
	background: #F3F6F8;
}
.checkbox {
	width: 1rem;
	height: 1rem;
	background: url(../../image/common/radio_off.png) no-repeat center center;
	background-size: 1rem;
}
.checkbox.checked {
	background: url(../../image/common/radio_on.png) no-repeat center center;
	background-size: 1rem;
}
.shop {
	background: #FFF;
}
.shop .item {
	padding: 0.9rem 0.8rem;
}
.shop .media {
	width: 3.6rem;
	margin: 0 0 0 0.8rem;
}
.textBox {
	min-height: 3.7rem;
	padding-left: 0.5rem;
}
.numBox {
	width: 3.2rem;
	height: 1rem;
	line-height: 1rem;
	border: 1px solid #E7E7E7;
	text-align: center;
	color: #ADADAD;
}
.up,.down{
	width: 1rem;
	line-height: 1rem;
	text-align: center;
}
.numBox input.num {
	text-align: center;
	font-size: 0.7rem;
	color: #555555;
	height: 1rem;
	line-height: 1rem;
}
.bg-e7{
	background: #E73450;
}
.ver{
	vertical-align: middle;
}
#footer{
	height: 2.5rem;
}
#footer .fotBtn{
	width: 7.15rem;
}
.del img{
	height:0.8rem;
}
.del{
	padding-left:1rem
}
@media (max-width:320px){
	#footer .fotBtn{
		width: 5.15rem;
	}
}
@media (max-width:335px){
	#footer .fotBtn{
		width: 6rem;
	}
}
</style>
</head>
<body>
<div class="">
	<div class="cartBox">
		<div class="shop aui-margin-t-10">
			<div class="item aui-flex-col aui-flex-middle">
				<div class="checkbox checkItem"></div>
				<div class="media"><img src="../../image/demo/03.png" alt=""></div>
				<div class="flex-auto aui-flex-row aui-flex-between textBox">
					<div>
						<div class="aui-font-size-12 aui-ellipsis-2">心相印卷纸 心柔3层140g*27粒纸巾整箱 新老包装随机...</div>
						<div class="color-555 aui-font-size-12" style="padding-top:0.25rem">灰色</div>
					</div>
					<div class="aui-flex-col aui-flex-between aui-flex-middle info">
						<div class="aui-font-size-18 color-e7"><i class="text-bold">58</i><span class="aui-font-size-10">积分</span></div>
						<div class="aui-font-size-12 color-ad flex-auto aui-padded-l-15"><s>￥126</s></div>
						<div class="aui-flex-col aui-flex-middle aui-flex-between numBox">
							<div class="down aui-border-r">-</div>
							<div class="flex-auto"><input type="number" value="1" class="num" readonly></div>
							<div class="up aui-border-l"> + </div>
						</div>
						<div class="del aui-hide"><img src="../../image/common/13.png" alt=""></div>
					</div>
				</div>
			</div>
		</div>
		<div class="shop aui-margin-t-10">
			<div class="item aui-flex-col aui-flex-middle">
				<div class="checkbox checkItem"></div>
				<div class="media"><img src="../../image/demo/03.png" alt=""></div>
				<div class="flex-auto aui-flex-row aui-flex-between textBox">
					<div>
						<div class="aui-font-size-12 aui-ellipsis-2">心相印卷纸 心柔3层140g*27粒纸巾整箱 新老包装随机...</div>
						<div class="color-555 aui-font-size-12" style="padding-top:0.25rem">灰色</div>
					</div>
					<div class="aui-flex-col aui-flex-between aui-flex-middle info">
						<div class="aui-font-size-18 color-e7"><i class="text-bold">58</i><span class="aui-font-size-10">积分</span></div>
						<div class="aui-font-size-12 color-ad flex-auto aui-padded-l-15"><s>￥126</s></div>
						<div class="aui-flex-col aui-flex-middle aui-flex-between numBox">
							<div class="down aui-border-r">-</div>
							<div class="flex-auto"><input type="number" value="1" class="num" readonly></div>
							<div class="up aui-border-l"> + </div>
						</div>
						<div class="del aui-hide"><img src="../../image/common/13.png" style="height:0.8rem;" alt=""></div>
					</div>
				</div>
			</div>
		</div>

	</div>
	<footer class="aui-bar aui-bar-tab" id="footer">
        <div class="aui-bar-tab-item" tapmode style="width: auto;">
        	<div class="aui-flex-col aui-flex-middle aui-flex-between aui-padded-l-15">
        		<div class="checkbox checkAll"></div>
						<div></div>
						<div class="aui-font-size-12 aui-margin-l-10 aui-text-left color-35 flex-auto">全选</div>
						<div class="aui-text-right aui-padded-r-10">
							<div class="aui-font-size-12 color-35 aui-flex-col aui-flex-bottom">
								<span class="aui-font-size-10 color-666">已包邮</span>
								<span>合计：</span>
								<span class="aui-font-size-18 color-e7"><label for="" class="text-bold">200</label><i class="aui-font-size-14">积分</i></span>
							</div>
							<div class="aui-font-size-10 color-555">可用积分 262枚</div>
						</div>
        	</div>
        </div>
        <div class="aui-bar-tab-item fotBtn color-fff bg-e7 " tapmode onClick="openWin('order_confirm_win');">去结算(<span id="all">0</span>)</div>
    </footer>
</div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
	apiready = function(){
		api.parseTapmode();
	};
	$$('.checkItem').on('tap',function(){
		$$(this).toggleClass('checked');
		$$(this).siblings('.textBox').children('.info').children('.del').toggleClass('aui-hide');
	});

	$$('.checkAll').on('click',	clickHandler4);
	$$('.numBox').each(function(){
		var box = $$(this);
		var input = box.find('.num');
		box.find('.down').on('click',function(){
			var num = input.val();
			num = parseInt(num)-1;
			num = num >0 ? num : 1;
			input.val(num);
		});
		box.find('.up').on('click',function(){
			var num = input.val();
			num = (!num) ? 0 : num;
			num = parseInt(num)+1;
			input.val(num);
		});
	});
	function clickHandler4() {
		$$(this).toggleClass('checked');
		$$('.del').toggleClass('aui-hide');
		if($$(this).hasClass('checked')){
			$$('.checkbox').addClass('checked');
		}else{
			$$('.checkbox').removeClass('checked');
		}
	}
	function openWin(url){
        api.openWin({
            name: url,
            url: url + '.html'
        });
    }
		function productDetail(url){
				api.openWin({
						name: url,
						url: url + '.html'
				});
		}
</script>
</html>
